<template>
  <div :style="styleName">
    <l-barcode
      :style="{
        width: config.barcodeType !== 'qr' ? '100%' : undefined,
        height: config.barcodeType !== 'qr' ? '100%' : undefined,
        border: config.barcodeType !== 'qr' ? undefined : border,
        borderRadius:
          config.barcodeType !== 'qr' ? undefined : `${config.bordeRadius}pt`,
      }"
      v-bind="params"
    />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styleName() {
      return {
        overflow: "hidden",
        width: `${this.config.width}pt`,
        height: `${this.config.height}pt`,
        opacity: this.config.opacity / 100,
        border: this.config.barcodeType !== "qr" ? this.border : undefined,
        borderRadius:
          this.config.barcodeType !== "qr"
            ? `${this.config.bordeRadius}pt`
            : undefined,
      };
    },
    params() {
      const res = {
        value: this.config.content,
        width: 2,
        height: this.$toPx(this.config.height - this.config.height * 0.16),
        format: this.config.barcodeType,
        correctLevel:3,
        margin: 0,
        size:
          this.config.width < this.config.height
            ? this.$toPx(this.config.width - this.config.borderSize * 2)
            : this.$toPx(this.config.height - this.config.borderSize * 2),
        background:
          this.config.isBackgroundColor == "1" && this.config.backgroundColor
            ? this.config.backgroundColor
            : undefined,
        displayValue: this.config.displayValue,

        color:
          this.config.isColor == "1" && this.config.color
            ? this.config.color
            : "rgba(0,0,0,1)",
        fontOptions: this.config.displayValue ? this.config.fontOptions : '',
        textAlign: this.config.displayValue ? this.config.textAlign : "left",
        textPosition: this.config.displayValue ? this.config.textPosition : "bottom",
      };
      return res;
    },

    border() {
      return this.config.borderSize <= 0
        ? ""
        : `${this.config.borderSize}pt ${this.config.borderLine} ${this.config.borderColor}`;
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
